<!DOCTYPE html>
<html>
<head>
    {% if title %}
    <title>{{title}} - octopus</title>
    {% else %}
    <title>octopus</title>
    {% endif %}
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="application/javascript" src="{{url_for('static',filename='jquery-1.11.0.min.js')}}"></script>
    <script type="application/javascript" src="{{url_for('static',filename='bootstrap.min.js')}}"></script>
    <link href="{{url_for('static',filename='bootstrap.min.css')}}" rel="stylesheet">
    <link href="{{url_for('static', filename='style.css')}}" rel="stylesheet" />
   <style type="text/css">
   .info-content {
          position: relative;
          background-color: #BDE5F8;
          border: 1px solid #999999;
          border: 1px solid rgba(0, 0, 0, 0.2);
          border-radius: 6px;
          outline: none;
          -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
                  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
          background-clip: padding-box;
      }
   .error-content {
          position: relative;
          background-color: #FFBABA;
          border: 1px solid #999999;
          border: 1px solid rgba(0, 0, 0, 0.2);
          border-radius: 6px;
          outline: none;
          -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
                  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
          background-clip: padding-box;
      }

    </style>
    <script>
        function check_password(){
            password1=$("#password1").val();
            password2=$("#password2").val();
            if (password1 != password2) {
                alert("first password and second password are not identical");
                $('#g_password1').addClass("has-error");
                return false
            }
            else {
            if($('#g_password1').hasClass("has-error"))
            {
                $('#g_password1').removeClass("has-error");
            }
            return true;
            }
        }
        function check_phonenumber(){
            phonenumber=$("#phonenumber").val()
            if (phonenumber == ""){
                alert("phone number can't be empty")
                return false
            }
            if (!phonenumber.match(/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|170)+\d{8})$/)) {
                alert("Your Phone Number seems not in China");
                 $('#g_phonenumber').addClass("has-error");
                return false;
                }
            else {
              if($('#g_phonenumber').hasClass("has-error"))
            {
                $('#g_phonenumber').removeClass("has-error");
            }
            return true;
            }
        }
        function check_email(){
            email=$("#email").val()
            if (email == ""){
                alert("E-mail can't be empty")
                return false
            }
            if (!email.match(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/)) {
            alert("It seems to be a wrong Email");
            $('#g_email').addClass("has-error");
            return false;
            }
            else {
              if($('#g_email').hasClass("has-error"))
            {
                $('#g_email').removeClass("has-error");
            }
            return true;
            }

        }
        function register() {
            loginname= $.trim($("#loginname").val())
            if (loginname =="") {
                alert("loginname can't be empty")
                return false
            }
            check_password()
            password=$.trim($("#password1").val())
            realname= $.trim($("#realname").val())
            if (realname =="") {
                alert("realname can't be empty")
                return false
            }
            check_phonenumber()
            phonenumber=$.trim($("#phonenumber").val())
            check_email()
            email=$.trim($("#email").val())

             $.post("/register",
        {
            csrf_token:"{{ csrf_token() }}",
            loginname:loginname,
            password:password,
            realname:realname,
            phonenumber:phonenumber,
            email:email,
            comment:$("#comment").val()
        },
        function(data,status){
            content= data;
            $('#addModal').modal('hide')
            if (content == "success"){
               show_info_refresh("ok","Register successfully");
            }
            else if( content.match("is already exist in database")){
                show_error_refresh("error",content)
            }
            else{
                show_error_refresh("unknown error","Please check the server's log");
            }
         });
        }
        function check_login_loginnamne(){
            loginname= $.trim($("#loginloginname").val())
            if (loginname =="") {
                alert("loginname can't be empty")
                return false
            }
        }
        function check_login_password() {
            password=$.trim($("#loginpassword").val())
            if (password =="") {
                alert("password can't be empty")
                return false
            }
        }

        function show_info_refresh(title,info) {
            $("#myinfoLabel_refresh").text(title) ;
            $("#myinfoContent_refresh").text(info) ;
            $(".error-content").addClass("info-content")
            $(".info-content").removeClass("error-content")
            $('#myinfo_refresh').modal({ keyboard: true });
        }
        function show_error_refresh(title,error) {
            $("#myinfoLabel_refresh").text(title) ;
            $("#myinfoContent_refresh").text(error) ;
            $(".info-content").addClass("error-content")
            $(".error-content").removeClass("info-content")
            $('#myinfo_refresh').modal({ keyboard: true });
        }
    </script>
</head>
<body>

<nav class="navbar navbar-inverse" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9">
            <span class="sr-only"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Welcome to octopus</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </nav>

<br><br>


<div class="container" style="margin-top: 5%">

    <div style="text-align: center">
        <h3>Login in</h3>
  {% with messages = get_flashed_messages() %}
  {% if messages %}
    <ul class=flashes style="color: red">
    {% for message in messages %}
      <h5>{{ message }}</h5>
    {% endfor %}
    </ul>
  {% else %}
      <br>
  {% endif %}
{% endwith %}
    </div>

    <div class="col-md-6 col-md-offset-3">

<form class="form-horizontal" role="form" action="" method="post" name="login">
   {{ loginform.csrf_token }}
  <div class="form-group">
    <label  class="col-sm-2 control-label">LoginName</label>
    <div class="col-sm-10">
      <input  class="form-control" id="loginloginname" placeholder="Login Name" name="loginname" onblur="check_login_loginnamne()">
    </div>
  </div>
  <div class="form-group">
    <label  class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="loginpassword" placeholder="Password" name="password" onblur="check_login_password()">
    </div>
  </div>
    <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox" name="remember_me"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group form-inline">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
        <button type="button" data-toggle="modal" class="btn btn-default" data-target="#addModal">Register</button>
    </div>
  </div>
</form>

</div>

<!-- Modal -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times;</button>
        <h4 class="modal-title" id="addModalLabel">Register a new user</h4>
      </div>
      <div class="modal-body">


<form method="post" action="" class="addhosts" name="form1">
    {{ registerform.csrf_token }}
    <!--{{ registerform.hidden_tag() }}-->

     <!--<div class="col-xs-3">-->

    <h5>start with "*" is required , others are optional</h5>



  <div class="input-group" id="g_loginname">
  <span class="input-group-addon">*  Login Name</span>
  {{registerform.loginname(class="form-control",placeholder="xiaosu")}}
   </div>


    <br>

   <div class="input-group" id="g_password1">
  <span class="input-group-addon">*  Password</span>
  <input class="form-control" id="password1" name="password1" placeholder="password" type="password">
   </div>

    <br>


   <div class="input-group" id="g_password2">
  <span class="input-group-addon">*  Repeat Password</span>
<input class="form-control" id="password2" name="password2" onblur="check_password()" placeholder="repeat password" type="password">
   </div>

    <br>
      <div class="input-group" id="g_realname">
  <span class="input-group-addon">*  Real Name</span>
  {{registerform.realname(class="form-control",placeholder="your real name")}}
   </div>


        <br>
   <div class="input-group" id="g_phonenumber">
  <span class="input-group-addon">*  Phone Number</span>
  {{registerform.phonenumber(class="form-control",placeholder="your mobile phone to recieve sms",onblur="check_phonenumber()")}}
   </div>

        <br>
      <div class="input-group" id="g_email">
  <span class="input-group-addon">*  E-mail</span>
  {{registerform.email(class="form-control",placeholder="your E-mail address",onblur="check_email()")}}
   </div>

    <br>
     <div class="input-group ">
  <span class="input-group-addon"> you can introduce yourself below :</span>

   </div>
           <textarea id="comment" class="form-control" wrap="wrap" rows="3"></textarea>

   <!--</div>-->
</form>



      </div>
      <div class="modal-footer">
        <button type="button" id="exit" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" id="add" class="btn btn-primary" onclick="register()">Register</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>


 <div id="myinfo_refresh" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myinfoContent" aria-hidden="true">
      <div class="modal-dialog">
        <div class="info-content">
          <div class="modal-header">
            <button type="button" onclick="window.location.reload()" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myinfoLabel_refresh">Modal Heading</h4>
          </div>
          <div class="modal-body">
            <h4 id="myinfoContent_refresh">Overflowing text </h4>
          </div>
          <div class="modal-footer">
            <button type="button" onclick="window.location.reload()"  class="btn btn-default" data-dismiss="modal">OK</button>
          </div>

        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

</body>
</html>